<template>
  <div class="user-wrapper">
    <MHeader title="我的">
      <template #right>
        <van-icon name="setting-o" size="16" @click="goUserDetail"/>
      </template>
    </MHeader>
    <van-skeleton title avatar :row="3" :loading="isLoading">
      <div class="user-info relative">
        <div class="info">
          <img src="https://s.yezgea02.com/1604040746310/aaaddd.png" alt=""/>
          <div class="user-desc overflow-auto">
            <span class="truncate block">昵称：{{ user.nickName }}</span>
            <span>登录名：{{ user.loginName }}</span>
            <span class="name line-clamp-2 break-all">个性签名：{{ user.introduceSign }}</span>
          </div>
        </div>
      </div>
      <ul class="user-list">
        <li
            v-for="(item,index) in userActionList"
            :key="index"
            class="user-item"
            @click="handleClick(item)"
        >
          <span>{{ item.name }}</span>
          <van-icon name="arrow"/>
        </li>
      </ul>
      <div class="logout m-2">
        <van-button plain type="default" block @click="handleLogout">登出</van-button>
      </div>
    </van-skeleton>
  </div>
</template>
<script setup lang="ts">
import MHeader from "@/components/MHeader/index.vue";
import {useRouter} from "vue-router";
import logoutAPI from "@/api/user/logoutAPI";
import useLoading from "@/hooks/useLoading";
import useUserDetail from "@/hooks/useUserDetail";
import useToken from "@/hooks/useToken";

const {isLoading} = useLoading();
const {user, handleSearchUserDetail} = useUserDetail();
const {token} = useToken();
handleSearchUserDetail();

interface IActionItem {
  name: string
  path: string
}

const userActionList: IActionItem[] = [
  {name: '我的订单', path: '/order'},
  {name: '账单管理', path: '/setting'},
  {name: '地址管理', path: '/address?from=mine'}
]
const router = useRouter();
const handleClick = (item: IActionItem) => {
  router.push(item.path);
}

const handleLogout = async () => {
  let response = await logoutAPI();
  if (response.code == 0) {
    token.value = '';
    router.push('/login');
  }
}

const goUserDetail = () => {
  router.push({name: 'UserDetail'})
}
</script>
<style scoped lang="less">
@import "@/assets/styles/mixin";

.user-wrapper {
  .user-info {
    margin: 10px;
    background: linear-gradient(90deg, @primary, #51c7c7);
    box-shadow: 0 2px 5px #269090;
    border-radius: 6px;

    .info {
      position: relative;
      display: flex;
      width: 100%;
      height: 100%;
      padding: 25px 20px;
      .boxSizing();

      img {
        .wh(60px, 60px);
        border-radius: 50%;
        margin-top: 4px;
      }

      .user-desc {
        display: flex;
        flex-direction: column;
        margin-left: 10px;
        line-height: 20px;
        font-size: 14px;
        color: #fff;


        span {
          color: #fff;
          font-size: 14px;
          padding: 2px 0;
        }
      }
    }
  }

  .user-list {
    padding: 0 20px;
    margin-top: 20px;

    li {
      height: 40px;
      line-height: 40px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 14px;
    }
  }
}
</style>